<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="60%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('CustomDeviceOperating')" prop="operating">
            <el-input v-model="form.operating" :placeholder="$t('CustomDeviceOperatingPlaceholder')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('CustomDeviceServeOS')" prop="serve_os">
            <el-input v-model="form.serve_os" :placeholder="$t('CustomDeviceServeOSPlaceholder')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('CustomDeviceClientOS')" prop="client_os">
            <el-input v-model="form.client_os" :placeholder="$t('CustomDeviceClientOSPlaceholder')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('CustomDeviceDataBase')" prop="database">
            <el-input v-model="form.database" :placeholder="$t('CustomDeviceDataBasePlaceholder')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('CustomDeviceBrowser')" prop="browser">
            <el-input v-model="form.browser" :placeholder="$t('CustomDeviceBrowserPlaceholder')" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="createFlag" type="primary" :disabled="!isModified" @click="handleCreate">{{
        $t('create')
      }}</el-button>
      <el-button v-else type="primary" :disabled="!isModified" @click="handleUpdate">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import sheetMixin from '@/mixins/SheetMixin'
import { createProjectCustomDeviceApi, updateProjectCustomDeviceApi } from '../api/projectcustomdevice.api';
import { getDropDownMenuListApi } from '@/api/common/common'

export default {
  mixins: [sheetMixin],
  data() {
    return {
      formRef: 'form',
      createTitle: this.$t('projectCustomDeviceCreateTitle'),
      updateTitle: this.$t('projectCustomDeviceUpdateTitle'),
      menuOptions: [],
      actionApi: {
        'create': createProjectCustomDeviceApi,
        'update': updateProjectCustomDeviceApi
      },
      form: {
        operating: undefined,
        serve_os: undefined,
        client_os: undefined,
        database: undefined,
        browser: undefined
      },
      error: {
        operating: undefined,
        serve_os: undefined,
        client_os: undefined,
        database: undefined,
        browser: undefined
      },
      rules: {
      }
    };
  },
  computed: {
    labelWidth() {
      return this.$i18n.locale === 'en' ? '150px' : '80px';
    }
  },
  methods: {
    initialize() {
      this.getMenuOption()
    },
    async getMenuOption() {
      var resp = await getDropDownMenuListApi();
      if (resp.success) {
        this.menuOptions = resp.data;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    handleCreate() {
      this.submitForm('create', this.$t('createSuccess'))
    },
    handleUpdate() {
      this.submitForm('update', this.$t('updateSuccess'))
    }
  }
};
</script>

  <style scoped>
  /* 通用输入框样式 */
  ::v-deep .el-input input,
  ::v-deep .el-select .el-input__inner,
  ::v-deep .el-date-editor .el-input__inner {
      width: 160px;
      box-sizing: border-box;
  }
  /* 设置所有的el-form-item__label标签的文本对齐方式为右对齐 */
  ::v-deep .el-form-item__label {
      text-align: right;
      }
  </style>
